@font-face {
    font-family: PT-Bold-Heading;
    src: url(../Fonts/PT\ Bold\ Heading.ttf);
}

@font-face {
    font-family: Arial-Black;
    src: url(../Fonts/Arial\ Black.ttf);
}

.cube-container {
    /* perspective: 1000px; */
    /* Set perspective to create the 3D effect */
    overflow: hidden !important;
}

.cube {
    width: 250px;
    /*Updatedwidth*/
    height: 150px;
    /*Updatedheight*/
    position: relative;
    transform-style: preserve-3d;
    /*Preserve3Dtransformations*/
    transform: rotateY(0deg);
    /*Initialposition*/
    animation: rotateY 10s infinite linear;
}

.cube .face {
    position: absolute;
    width: 250px;
    /* Updated width */
    height: 150px;
    /* Updated height */
    /* background-color: #fff;
    border: 2px solid #ddd; */
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); */
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    /* Hide the back side of faces */
}

.cube img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Positioning the faces */
.cube .front {
    transform: rotateY(0deg) translateZ(125px);
    /* Positioned forward */
}

.cube .back {
    transform: rotateY(180deg) translateZ(125px);
    /* Positioned backward */
}

.cube .right {
    transform: rotateY(90deg) translateZ(125px);

}

.cube .left {
    transform: rotateY(-90deg) translateZ(125px);
    /* Positioned to the left */
}

/* Y-axis rotation animation */
@keyframes rotateY {
    from {
        transform: rotateY(0deg);
        /* Start rotation */
    }

    to {
        transform: rotateY(360deg);
        /* Complete rotation */
    }
}

/* Stop animation on hover */
.cube:hover {
    animation-play-state: paused;
    /* Pause the animation when hovered */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#TopBtnAr {
    font-family: PT-Bold-Heading;
    font-size: 25px !important;
    margin-right: -50px;
}

#TopBtnEn {
    font-family: Arial-Black;
    font-size: 22px !important;
    margin-right: 20px;
}

#TopBtnEn,
#TopBtnAr {
    font-weight: bold;
    color: black;
    text-decoration: none;
    height: 60px;
    width: 90px;
    /* font-size: 25px; */
    transition: 0.7s;
    outline: none;
    /* padding-bottom: 10px;
    padding-top: 10px; */
    cursor: pointer;
    background-color: transparent;
    border: double 10px rgb(0, 0, 120);
}

#Footer_LangBtnEn {
    font-family: Arial-Black;
    font-size: 20px;
    /* animation: Language_Button_Footer_En cubic-bezier(0.77, 0, 0.175, 1) 2s; */
    margin-left: 20px;
}

#Footer_LangBtnAr {
    font-family: PT-Bold-Heading;
    font-size: 24px;
    /* animation: Language_Button cubic-bezier(0.77, 0, 0.175, 1) 2s; */
}

#Footer_LangBtnAr,
#Footer_LangBtnEn {
    /* font-size: 25px; */
    font-weight: bold;
    color: black;
    text-decoration: none;
    margin-right: 20px;
    transition: 0.7s;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    border: double 10px rgb(0, 0, 120);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    height: 60px !important;
    padding-right: 10px;
    padding-left: 10px;
}

#LangBtnEn,
#LangBtnAr {
    font-weight: bold;
    color: black;
    text-decoration: none;
    /* height: 50px !important; */
    /* max-height: min-content !important; */
    font-size: 25px;
    margin-right: 20px;
    transition: 0.7s;
    outline: none;
    padding: 20px;
    cursor: pointer;
    background-color: transparent;
    border: double 10px rgb(0, 0, 120);
    animation: Language_Button cubic-bezier(0.77, 0, 0.175, 1) 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /* animation: none; */
}

@keyframes Rotate {
    to {
        transform: rotate(3600deg);
    }
}

#TopBtnEn:hover,
#TopBtnAr:hover,
#Footer_LangBtnAr:hover,
#Footer_LangBtnEn:hover {
    animation-name: Rotate;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

#LangBtnEn:hover,
#TopBtnEn:hover,
#Footer_LangBtnEn:hover,
#Footer_LangBtnAr:hover,
#LangBtnAr:hover,
#TopBtnAr:hover {
    color: white;
    background-color: rgb(0, 0, 120);
    border: double 10px white;
    border-radius: 50%;
}

#NavBar_P_Ar {
    color: black;
    font-family: PT-Bold-Heading;
    font-weight: bold;
    font-size: 70px;
}

#NavBar_P_En {
    font-family: Arial-Black;
    color: black;
    font-weight: bold;
    font-size: 40px;
}

#NavBar_P_Ar,
#NavBar_P_En {
    transition: 0.5s;
    animation: Institute_Title cubic-bezier(0.77, 0, 0.175, 1) 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

#Arabic_NavBar,
#English_NavBar {
    filter: url('#goo');
    overflow: hidden;
    background-color: rgb(243, 235, 223);
    transition: 0.4s;
    width: 100%;
    margin-top: -155px;
    height: 330px;
    z-index: 99;
}

#Nav_Links_Container_En,
#Nav_Links_Container_Ar {
    transition: 0.5s;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.Nav_Links {
    color: black;
    text-align: center;
    padding: 30px 30px;
    text-decoration: none;
    font-size: 25px;
    position: absolute;
    left: 30%;
    transition: 0.5s;
    animation: navlink_1 cubic-bezier(0.77, 0, 0.175, 1) 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.Nav_Link_Footer_En:before,
.Nav_Link_Footer_Ar:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    transform-origin: left;
    background: transparent;
    /*ToApplythereddishbackgroundfromtheverybegining*/
    transform: scaleX(0);
    z-index: -1;
    /* font-size: 10px; */
}

.Nav_Links:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    transform-origin: right;
    background: rgb(0, 0, 119);
    /* To Apply the reddish background from the very begining*/
    z-index: -1;
    transform: scaleX(0);
}

.Nav_Links:hover:before,
.Nav_Link_Footer_En:hover:before,
.Nav_Link_Footer_Ar:hover:before {
    transition: transform 0.5s;
    transform-origin: right;
    transform: scaleX(1);
}

.Nav_Links_En {
    font-size: 25px;
    width: min-content;
    font-family: Arial-Black;
}

.Nav_Links_Ar {
    font-size: 25px;
    font-family: PT-Bold-Heading;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@keyframes Institute_Title {
    0% {
        transform: translate(0, -300px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes ARC_Logo {
    0% {
        transform: translate(-300px, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes Language_Button {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes Language_Button_Footer_En {
    0% {
        transform: translate(-200px, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes navlink_1_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(900px, 0);
    }
}

@keyframes navlink_2_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(780px, 0);
    }
}

@keyframes navlink_3_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(590px, 0);
    }
}

@keyframes navlink_4_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(450px, 0);
    }
}

@keyframes navlink_5_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(190px, 0);
    }
}

@keyframes navlink_6_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(-10px, 0);
    }
}

@keyframes navlink_7_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(-180px, 0);
    }
}

@keyframes navlink_8_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(-280px, 0);
    }
}

@keyframes navlink_9_Ar {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(-440px, 0);
    }
}

.Nav_Links_Ar:nth-child(1) {
    animation-name: navlink_1_Ar;
    /* display: none; */
}

.Nav_Links_Ar:nth-child(2) {
    animation-name: navlink_2_Ar;
}

.Nav_Links_Ar:nth-child(3) {
    animation-name: navlink_3_Ar;
}

.Nav_Links_Ar:nth-child(4) {
    animation-name: navlink_4_Ar;
    /* display: none; */
}

.Nav_Links_Ar:nth-child(5) {
    animation-name: navlink_5_Ar;
}

.Nav_Links_Ar:nth-child(6) {
    animation-name: navlink_6_Ar;
}

.Nav_Links_Ar:nth-child(7) {
    animation-name: navlink_7_Ar;
}

.Nav_Links_Ar:nth-child(8) {
    animation-name: navlink_8_Ar;
}

.Nav_Links_Ar:nth-child(9) {
    animation-name: navlink_9_Ar;
}

@keyframes navlink_1_En {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(790px, 0);
    }
}

@keyframes navlink_2_En {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(635px, 0);
    }
}

@keyframes navlink_3_En {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(475px, 0);
    }
}

@keyframes navlink_4_En {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(300px, 0);
    }
}

@keyframes navlink_5_En {
    0% {
        transform: translate(140px, 0);
    }

    100% {
        transform: translate(80px, 0);
    }
}

@keyframes navlink_6_En {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(-70px, 0);
    }
}

@keyframes navlink_7_En {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(-200px, 0);
    }
}

@keyframes navlink_8_En {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(-345px, 0);
    }
}

@keyframes navlink_9_En {
    0% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(-450px, 0);
    }
}

.Nav_Links_En:nth-child(1) {
    animation-name: navlink_1_En;
}

.Nav_Links_En:nth-child(2) {
    animation-name: navlink_2_En;
}

.Nav_Links_En:nth-child(3) {
    animation-name: navlink_3_En;
}

.Nav_Links_En:nth-child(4) {
    animation-name: navlink_4_En;
}

.Nav_Links_En:nth-child(5) {
    animation-name: navlink_5_En;
}

.Nav_Links_En:nth-child(6) {
    animation-name: navlink_6_En;
}

.Nav_Links_En:nth-child(7) {
    animation-name: navlink_7_En;
}

.Nav_Links_En:nth-child(8) {
    animation-name: navlink_8_En;
}

.Nav_Links_En:nth-child(9) {
    animation-name: navlink_9_En;
}

.ARC_Logo {
    transition: 0.5s;
    animation: ARC_Logo cubic-bezier(0.77, 0, 0.175, 1) 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    overflow: hidden !important;
}

.NavBar_Logos {
    margin-top: 20px;
    width: 275px;
    height: 175px;
    transition: 0.5s;
}

.cube-container:hover {
    animation: shake 0.1s;
    animation-iteration-count: infinite;
}

.D_None {
    display: none;
}

.Text_Direction_En {
    direction: ltr;
}

.Text_Direction_Ar {
    direction: rtl;
}

.Flex_Direction_En {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Flex_Direction_Ar {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

#Upper_NavBar_Ar,
#Upper_NavBar_En {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* English Keyframes animation for Arabic Navigation Links In Mobile*/

@keyframes blob-top-left-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(-250px, -35px);
    }
}

@keyframes blob-top-right-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(175px, -30px);
    }
}

@keyframes blob-bottom-left-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(-250px, 200px);
    }
}

@keyframes blob-bottom-right-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(175px, 200px);
    }
}

@keyframes blob-top-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.9) translate(25px, -30px);
    }
}

@keyframes blob-center-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(10px, 65px);
    }
}

@keyframes blob-right-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(195px, 65px);
    }
}

@keyframes blob-bottom-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(0px, 200px);
    }
}

@keyframes blob-left-anim_En {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.78) translate(-220px, 65px);
    }
}

/* Arabic Keyframes animation for Arabic Navigation Links In Mobile*/

@keyframes blob-top-left-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(-140px, -30px)
    }
}

@keyframes blob-top-left-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(-190px, 0px)
    }
}

@keyframes blob-top-right-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(235px, -30px)
    }
}

@keyframes blob-top-right-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(210px, 0px)
    }
}

@keyframes blob-bottom-left-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(-210px, 165px);
    }
}

@keyframes blob-bottom-left-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(-210px, 165px);
    }
}

@keyframes blob-bottom-right-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(195px, 165px);
    }
}

@keyframes blob-bottom-right-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(195px, 165px);
    }
}

@keyframes blob-top-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(25px, -30px);
    }
}

@keyframes blob-top-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(10px, 0px);
    }
}

@keyframes blob-center-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(20px, 65px);
    }
}

@keyframes blob-center-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(20px, 65px);
    }
}

@keyframes blob-right-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(210px, 65px);
    }
}

@keyframes blob-right-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(210px, 65px);
    }
}

@keyframes blob-bottom-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(0px, 165px);
    }
}

@keyframes blob-bottom-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(15px, 165px);
    }
}

@keyframes blob-left-anim_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(-250px, 45px);
    }
}

@keyframes blob-left-anim_Special_Ar {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    100% {
        transform: scale(0.8) translate(-225px, 65px);
    }
}

@media screen and (max-width : 1485px) {
    body {
        overflow-x: hidden !important;
    }

    .cube-container {
        /* perspective: 1000px; */
        /* Set perspective to create the 3D effect */
        overflow: hidden !important;
    }

    #NavBar_P_En {
        font-size: 31px;
        margin-left: 20px;
        margin-right: 20px;
        /* overflow-x: hidden !important; */
    }

    #NavBar_P_Ar {
        font-size: 65px;
    }

    #Nav_Links_Container_En {
        transition: 0.5s;
        transform: scale(80%);
        margin-right: 125px;
    }

    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(80%);
        margin-right: 150px;
    }

    .Nav_Links:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(0, 0, 119);
        transition: 0.5s;
        transform-origin: right;
        /* To Apply the reddish background from the very begining*/
        transform: scaleX(0);
        z-index: -1;
    }

    .Nav_Links:hover:before {
        transition: transform 0.5s;
        transform-origin: left;
        transform: scaleX(1);
    }
}

@media screen and (max-width :1200px) {

    /* #TopBtnAr, */
    #LangBtnEn {
        transform: scale(80%);
        margin-right: 5px;
    }

    /* #TopBtnEn , */
    #LangBtnAr {
        transform: scale(80%);
        margin-right: 5px;
    }

    #Nav_Links_Container_En,
    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(68%);
        margin-right: 175px;
    }

    #NavBar_P_En {
        font-size: 25px;
        margin-left: -80px;
        margin-right: -50px;
    }

    #NavBar_P_Ar {
        font-size: 52px;
    }

    .NavBar_Logos {
        transform: scale(70%);
    }
}

@media screen and (max-width : 1050px) {

    #Land_Line_Span_Ar,
    #Address_Div_Ar,
    #Contact_Email {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #Fax_Span_Ar {
        margin-left: 80px !important;
    }
}

@media screen and (max-width :1020px) {

    #Nav_Links_Container_En,
    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(60%);
        margin-right: 200px;
    }

    #NavBar_P_En {
        font-size: 21px;
        margin-right: -55px;
    }

    #NavBar_P_Ar {
        font-size: 38px;
        margin-left: -50px;
        margin-right: -45px;
    }

    #Footer_LangBtnAr,
    #LangBtnAr,
    #TopBtnEn {
        margin: 0;
        padding: 0;
        margin-right: 10px;
        width: 100px;
        height: 60px;
    }

    #Footer_LangBtnEn,
    #LangBtnEn,
    #TopBtnAr {
        margin: 0;
        padding: 0;
        margin-right: 10px;
        width: 130px;
        height: 60px;
    }
}

@media screen and (max-width :900px) {

    .content {
        min-width: -webkit-fill-available;
    }
    #Footer_LangBtnAr,
    #LangBtnAr,
    #TopBtnEn {
        margin: 0;
        padding: 0;
        width: 70px;
        margin-right: 5px;
    }

    #Footer_LangBtnEn,
    #LangBtnEn,
    #TopBtnAr {
        margin: 0;
        padding: 0;
        width: 120px;
        height: 60px;
        margin-right: 5px;
    }

    .NavBar_Logos {
        transform: scale(70%);
        margin-right: 40px;
    }

    #Nav_Links_Container_En,
    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(54%);
        margin-right: 200px;
    }

    #NavBar_P_En {
        font-size: 19px;
    }

    #NavBar_P_Ar {
        font-size: 35px;
        margin-right: 10px;
    }
}

@media screen and (max-width : 800px) {

    /* #Footer_P_Ar {
        transform: scale(70%);
        margin-right: -100px !important;
    } */
    /* Positioning the faces */
    .cube .front {
        transform: rotateY(0deg) translateZ(70px);
    }

    .cube .back {
        transform: rotateY(180deg) translateZ(70px);
        /* Positioned backward */
    }

    .cube .right {
        transform: rotateY(90deg) translateZ(70px);

    }

    .cube .left {
        transform: rotateY(-90deg) translateZ(70px);
        /* Positioned to the left */
    }

    #Arabic_NavBar,
    #English_NavBar {
        height: 465px;
    }

    #Footer_LangBtnAr,
    #LangBtnAr,
    #TopBtnEn {
        padding: 0;
        width: 80px;
        height: 60px;
    }

    #Footer_LangBtnEn,
    #LangBtnEn,
    #TopBtnAr {
        padding: 0;
        margin-right: 10px;
        width: 115px;
        height: 60px;
    }

    #NavBar_P_En {
        margin-right: -25px;
        font-size: 17px;
    }

    #NavBar_P_Ar {
        font-size: 33px;
        margin-left: -125px;
        margin-right: -75px;
    }

    #Nav_Links_Container_En {
        transition: 0.5s;
        transform: scale(85%);
        margin-left: 220px;
    }

    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(100%);
        margin-left: 200px;
    }

    .NavBar_Logos {
        width: 200px;
        height: 125px;
    }

    .Nav_Links:before {
        /* To Apply the reddish background from the very begining*/
        transform: scaleX(0);
        z-index: -1;
    }

    .Nav_Links:hover:before {
        transition: transform 0.3s;
    }

    /* English Navigation Links For Mobile*/
    .Nav_Links_En:nth-child(1) {
        animation-name: blob-top-left-anim_En;
    }

    .Nav_Links_En:nth-child(2) {
        animation-name: blob-top-right-anim_En;
    }

    .Nav_Links_En:nth-child(3) {
        animation-name: blob-left-anim_En;
    }

    .Nav_Links_En:nth-child(4) {
        animation-name: blob-bottom-right-anim_En;
    }

    .Nav_Links_En:nth-child(5) {
        animation-name: blob-bottom-left-anim_En;
    }

    .Nav_Links_En:nth-child(6) {
        animation-name: blob-bottom-anim_En;
    }

    .Nav_Links_En:nth-child(7) {
        animation-name: blob-right-anim_En;
    }

    .Nav_Links_En:nth-child(8) {
        animation-name: blob-center-anim_En;
        /* animation-name: blob-bottom-left-anim_En; */
    }

    .Nav_Links_En:nth-child(9) {
        animation-name: blob-top-anim_En;
    }

    /* Arabic Navigation Links For Mobile*/
    .Nav_Links_Ar:nth-child(1) {
        animation-name: blob-top-anim_Ar;
    }

    .Nav_Links_Ar:nth-child(2) {
        animation-name: blob-top-right-anim_Ar;
    }

    .Nav_Links_Ar:nth-child(3) {
        animation-name: blob-bottom-left-anim_Ar;
    }

    .Nav_Links_Ar:nth-child(4) {
        animation-name: blob-right-anim_Ar;
    }

    .Nav_Links_Ar:nth-child(5) {
        animation-name: blob-left-anim_Ar;
    }

    .Nav_Links_Ar:nth-child(6) {
        animation-name: blob-bottom-anim_Ar;
    }

    .Nav_Links_Ar:nth-child(7) {
        animation-name: blob-bottom-right-anim_Ar;
    }

    .Nav_Links_Ar:nth-child(8) {
        animation-name: blob-top-left-anim_Ar;
    }

    .Nav_Links_Ar:nth-child(9) {
        animation-name: blob-center-anim_Ar;
    }
}

@media screen and (max-width : 700px) {

    #Footer_LangBtnEn,
    #LangBtnEn,
    #TopBtnAr {
        margin-right: 10px;
        width: 100px;
        height: 60px;
        font-size: 19px;
    }

    #Footer_LangBtnAr,
    #LangBtnAr,
    #TopBtnEn {
        margin: 0;
        padding: 0;
        margin-right: 10px;
        width: 100px;
        height: 60px;
    }

    #NavBar_P_Ar {
        font-size: 25px;
    }

    #NavBar_P_En {
        font-size: 14px;
    }

    .NavBar_Logos {
        transform: scale(70%);
    }
}

@media screen and (max-width : 620px) {
    #NavBar_P_Ar {
        font-size: 26px;
    }

    #NavBar_P_En {
        font-size: 13px;
    }

    .Nav_Links_Ar:nth-child(1) {
        animation-name: blob-top-anim_Special_Ar;
    }

    .Nav_Links_Ar:nth-child(2) {
        animation-name: blob-top-right-anim_Special_Ar;
    }

    .Nav_Links_Ar:nth-child(3) {
        animation-name: blob-bottom-left-anim_Special_Ar;
    }

    .Nav_Links_Ar:nth-child(4) {
        animation-name: blob-right-anim_Special_Ar;
    }

    .Nav_Links_Ar:nth-child(5) {
        animation-name: blob-left-anim_Special_Ar;
    }

    .Nav_Links_Ar:nth-child(6) {
        animation-name: blob-bottom-anim_Special_Ar;
    }

    .Nav_Links_Ar:nth-child(7) {
        animation-name: blob-bottom-right-anim_Special_Ar;
    }

    .Nav_Links_Ar:nth-child(8) {
        animation-name: blob-top-left-anim_Special_Ar;
    }

    .Nav_Links_Ar:nth-child(9) {
        animation-name: blob-center-anim_Special_Ar;
    }
}

@media screen and (max-width : 600px) {

    .NavBar_Logos {
        transform: scale(60%);
    }

    #Footer_LangBtnEn,
    #LangBtnEn,
    #TopBtnAr {
        width: 90px;
        height: 60px;
        font-size: small;
    }

    #Footer_LangBtnAr,
    #LangBtnAr,
    #TopBtnEn {
        width: 100px;
        height: 60px;
        font-size: 17px;
    }

    #NavBar_P_Ar {
        font-size: 17px;
    }

    #NavBar_P_En {
        font-size: 9px;
        margin-left: -75px;
    }

    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(90%);
        margin-left: 150px;
    }

    #Nav_Links_Container_En {
        transition: 0.5s;
        transform: scale(85%);
        margin-left: 150px;
    }
}

@media screen and (max-width : 500px) {

    /* Positioning the faces */
    .cube .front {
        transform: rotateY(0deg) translateZ(125px);
    }

    .cube .back {
        transform: rotateY(180deg) translateZ(125px);
        /* Positioned backward */
    }

    .cube .right {
        transform: rotateY(90deg) translateZ(125px);

    }

    .cube .left {
        transform: rotateY(-90deg) translateZ(125px);
        /* Positioned to the left */
    }

    #English_NavBar {
        height: 575px;
    }

    #Arabic_NavBar {
        height: 535px;
    }

    #Nav_Links_Container_En {
        transition: 0.5s;
        transform: scale(75%);
        margin-left: 75px;
        margin-top: 30px;
    }

    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(80%);
        margin-left: 150px;
        margin-top: 0px;
    }

    #Footer_LangBtnAr,
    #LangBtnAr,
    #TopBtnEn {
        margin: 0;
        padding: 0;
        width: 100px;
        height: 70px;
        margin-top: 25px;
    }

    #Footer_LangBtnEn,
    #LangBtnEn,
    #TopBtnAr {
        margin: 0;
        padding: 0;
        width: 130px;
        height: 70px;
        margin-top: 25px;
        font-size: 25px;
    }

    #Upper_NavBar_Ar,
    #Upper_NavBar_En {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #NavBar_P_En {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 25px;
    }

    #NavBar_P_Ar {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 30px;
    }

    .NavBar_Logos {
        margin: 0;
        transform: scale(100%);
    }
}


@media screen and (max-width : 400px) {
    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(80%);
        margin-left: 100px;
        margin-top: 0px;
    }

    /* #Footer_LangBtnEn,
    #LangBtnAr,
    #TopBtnAr {
        margin: 0;
        padding: 0;
        width: 80px;
        margin-top: 25px !important;
    } */

    #Nav_Links_Container_En {
        transition: 0.5s;
        transform: scale(68%);
        margin-left: 75px;
        margin-top: 30px;
    }
}

@media screen and (max-width : 350px) {

    #Footer_LangBtnEn,
    #LangBtnEn,
    #TopBtnAr {
        margin: 0;
        margin-top: 15px;
        width: 120px;
        height: 60px;
    }

    #NavBar_P_Ar {
        font-size: 25px;
    }

    #Nav_Links_Container_Ar {
        transition: 0.5s;
        transform: scale(70%);
        margin-right: 190px;
    }

    #Nav_Links_Container_En {
        transition: 0.5s;
        transform: scale(63%);
        margin-left: 100px;
    }
}

@media screen and (max-width : 300px) {
    #English_NavBar {
        height: 455px;
    }

    #Arabic_NavBar {
        height: 422px;
    }

    .NavBar_Logos {
        transform: scale(90%);
    }

    #NavBar_P_Ar {
        font-size: 22px;
    }

    #NavBar_P_En {
        font-size: 20px;
    }

    #Footer_LangBtnEn,
    #LangBtnEn,
    #TopBtnAr {
        margin: 0;
        padding: 0;
        font-size: 20px;
        margin-top: 15px;
        width: 100px;
        height: 50px;
    }

    #Footer_LangBtnAr,
    #LangBtnAr,
    #TopBtnEn {
        margin: 0;
        padding: 0;
        width: 90px;
        height: 65px;
    }

    #Nav_Links_Container_Ar {
        transform: scale(65%);
        margin-right: 175px;
    }

    #Nav_Links_Container_En {
        transform: scale(50%);
        margin-left: 85px;
        margin-top: 25px;
    }
}